<template>
	<view class="homeWrap">
		<uv-swiper :list="list"></uv-swiper>
		<view v-for="(item,idx) in menu" :key="idx">
			<view class="title">
				<view class="line"></view>
				<text class="text">{{item.title}}</text>
			</view>
			<uv-row v-if="idx == 0" gutter="10" customStyle="margin-bottom: 10px">
				<uv-col span="6">
					<view class="topCard leftCard">
						<view class="l">
							<view class="tit"> 预约挂号 </view>
							<view class="info">在线预约挂号</view>
						</view>
						<view class="icon">
							<uv-icon size="60rpx" color="#fff" name="yuyue" custom-prefix="icon"></uv-icon>
						</view>
					</view>
				</uv-col>
				<uv-col span="6">
					<view class="topCard rightCard">
						<view class="l">
							<view class="tit"> 在线充值 </view>
							<view class="info">就诊卡预存充值</view>
						</view>
						<view class="icon">
							<uv-icon size="60rpx" color="#fff" name="chongzhi" custom-prefix="icon"></uv-icon>
						</view>
					</view>
				</uv-col>
			</uv-row>
			<uv-grid :border="false" col="4">
				<uv-grid-item v-for="(val,index) in item.menu" :key="index">
					<view class="card">
						<view class="icon">
							<uv-icon size="40rpx" color="#000" :name="val.icon" custom-prefix="icon"></uv-icon>
						</view>
						<view class="tit">
							{{val.title}}
						</view>
					</view>
				</uv-grid-item>
			</uv-grid>
		</view>
	</view>
</template>

<script>
import menu from "@/utils/menu.js"
export default {
	data() {
		return {
			list: ['https://gd-hbimg.huaban.com/674a9c5d0e86e54aee5722ead1789be6439cee0f6072f-AjdcNR_fw1200', 'https://gd-hbimg.huaban.com/a7630a1c880a5cdf8057ebad1239f5d6c74b208b371c9-C0W7CO_fw1200', 'https://gd-hbimg.huaban.com/9ca7866d8dc053e3cc2c906d3114c2bb8e34a521cb4c-EVmbdP'],
			menu,
			
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.homeWrap {
	padding: 20rpx 30rpx;
	.title {
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		.line {
			width: 30rpx;
			height: 10rpx;
			border-radius: 5rpx;
			background-color: #006eff;
			margin-right: 20rpx;
		}
	}
	.topCard{
		height: 130rpx;
		padding: 30rpx;
		padding-right: 20rpx;
		background-color: #f00;
		border-radius: 14rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.l{
			.tit{
				font-size: 36rpx;
			}
			.info{
				font-size: 26rpx;
				margin-top: 20rpx;
			}
		}
		.icon{
			border-radius: 50%;
			width: 90rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.leftCard{
		background-color: #FCEFF0;
		.tit{
			color: #F46565;
		}
		.info{
			color: #f4a4a4;
		}
		.icon{
			background-color: #FBD3D4;
		}
	}
	.rightCard{
		background-color: #E9FAF2;
		.tit{
			color: #2ED477;
		}
		.info{
			color: #88DCA2;
		}
		.icon{
			background-color: #C2F2D9;
		}
	}
	.card{
		// box-shadow: 0 0 10rpx #ddd;
		padding: 20rpx;
		text-align: center;
		border-radius: 14rpx;
		// margin-bottom: 20rpx;
		.icon{
			margin: 0 auto;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F5F5F5;
		}
		.tit{
			font-size: 26rpx;
			margin-top: 10rpx;
			color: #666;
		}
	}
}
</style>
